<template>
  <div>
    <myDivider name="合同详情"></myDivider>
    <el-page-header @back="$router.back(-1)">
    </el-page-header>
    <el-form style="width: 600px;margin-top: 50px;" :model="ruleForm" ref="ruleForm" label-width="120px"
      class="demo-ruleForm">
      <el-form-item label="关联小区：" prop="residentialName">
          <el-input disabled style="width: 520px;" v-model="ruleForm.residentialName" placeholder=""></el-input>
        </el-form-item>
      <div style="display: flex;">
        <el-form-item label="合同名称：" prop="name">
          <el-input disabled style="width: 200px;" v-model="ruleForm.name" placeholder="请输入合同名称"></el-input>
        </el-form-item>
        <el-form-item label="合同类别：" prop="category">
          <el-input disabled style="width: 200px;" v-model="ruleForm.categoryName" placeholder="请输入合同名称"></el-input>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item label="合同编号：">
          <el-input disabled style="width: 200px;" v-model="ruleForm.contractNumber" placeholder="自动生成"></el-input>
        </el-form-item>
        <el-form-item label="丙方名称：" prop="partyC">
          <el-input disabled style="width: 200px;" v-model="ruleForm.partyC" placeholder="请输入丙方名称"></el-input>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item label="甲方名称：" prop="partyA">
          <el-input disabled style="width: 200px;" v-model="ruleForm.partyA"></el-input>
        </el-form-item>
        <el-form-item label="乙方名称：" prop="partyB">
          <el-input disabled style="width: 200px;" v-model="ruleForm.partyB" placeholder="请输入乙方名称"></el-input>
        </el-form-item>
      </div>

      <div style="display: flex;">
        <el-form-item label="金额：" prop="amountPrice">
          <div style="display: flex;width: 200px;">
            <el-input disabled type="number" style="width: 140px;" v-model="ruleForm.amountPrice"
              placeholder="请输入金额"></el-input>
            <span style="margin-left: 15px;">元</span>
          </div>
        </el-form-item>
        <el-form-item label="签订日期：" prop="signingDate">
          <el-input disabled style="width: 200px;" v-model="ruleForm.signingDate"></el-input>
        </el-form-item>
      </div>
      <el-form-item label="内容概要：" prop="description">
        <el-input disabled style="width: 520px;" v-model="ruleForm.description" type="textarea" :rows="5" maxlength="10"
          placeholder="请输入会议概要，不超过200字"></el-input>
      </el-form-item>
      <el-form-item label="图片：" prop="" required>
        <div class="imglist">
          <el-image class="el" style="width: 100px; height: 100px" v-for="item, i in ruleForm.imgs" :key="i" :src="item"
            :preview-src-list="ruleForm.imgs">
          </el-image>
        </div>
      </el-form-item>
      <el-form-item label="附件：">
        <div class="annexBox">
          <div class="annexList" v-if="ruleForm.annexPathArr != null">
            <div class="el" v-for="item, i in MyannexPathArr" :key="i">
              <span>{{ item.name }}</span><span @click="dow(item)">下载附件</span>
            </div>
          </div>
          <span class="annexNone" v-else>无添加附件</span>
        </div>
      </el-form-item>
      <el-form-item label="经办人：">
        <el-input style="width: 200px;" v-model="ruleForm.createUserName" placeholder="自动匹配" disabled></el-input>
      </el-form-item>
      <el-form-item label="归档日期：">
        <el-input disabled style="width: 200px;" v-model="ruleForm.completeTime" placeholder="自动生成"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';
export default {

  data() {
    return {
      MyannexPathArr: [],
      ruleForm: {},
    };
  },
  async activated() {
    let res = await this.$api.contract.getContractDetail(this.$route.query.id)
    this.ruleForm = res.data
    console.log(res.data, '详情数据');
    this.MyannexPathArr = []
    if (res.data.annexPathArr != null) { //附件列表回显
      res.data.annexPathArr.forEach((el) => {
        let lastindex = el.lastIndexOf("/") + 1
        this.MyannexPathArr.push({
          name: el.slice(lastindex),
          url: el
        })
      })
    }
  },
  deactivated() {

  },
  methods: {
    dow(item) {
   
      let soa_account = sessionStorage.getItem("soa_account");
      const token = sessionStorage.getItem("soa_token")
      axios({
        method: 'get',
        url: defaultUrl+`/business/contract/downloadAnnex?filename=${item.url}`,
        headers: {
          // 在这里添加自己需要的请求头
          account: soa_account,
          token: token,
        },
        responseType: 'blob'
      }).then(res => {
        const url = window.URL.createObjectURL(new Blob([res.data]))
        const a = document.createElement('a')
        a.href = url
        a.setAttribute('download',item.name)
        document.body.appendChild(a)
        a.click();
        document.body.removeChild(a)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.imglist {
  .el {
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
  }
}

.annexBox {
  width: 500px;

  .annexList {
    width: 100%;
    box-sizing: border-box;
    border-right: 3px solid rgb(23, 197, 255);

    .el {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        &:nth-child(1) {
          width: 300px;
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &:nth-child(2) {
          color: rgb(23, 197, 255);
          cursor: pointer;
          margin-right: 10px;
        }
      }
    }
  }

  .annexNone {
    color: #aaa;
  }
}
</style>